上一篇我們說到怎樣才算是把菜單送到老闆手上呢?
送出菜單有兩個步驟

1. 顧客送出菜單
2. 老闆接收菜單

我們這邊採用的方式是顧客把菜單放到某個地方，等老闆要看的時候在自己去拿起來看。
翻成我們程式上的邏輯就是

1. 先將顧客填好的表單寫入資料庫
2. 老闆需要看的時候再從資料庫去找

新增資料庫表單

我們先來分析一下菜單的組成。
一張菜單是由一個單號(電話號碼)，加上一到多個商品(品名/單價/數量)所組成。
老闆可能需要依照建立的時間來分應該要先做哪一張單子，
所以我們這邊可能還需要給一個單子的建立時間。
這樣我們就可以得出我們要建兩張Table(表單)
表頭(menulisth):

1. uid(流水號)
2. formnum(表單號碼/電話號碼)
3. createtime(建立時間)
   

表身(menulistb):

1. uid(流水號)
2. h_uid(與表頭對應的uid)
3. item(品名)
4. price(單價)
5. count(數量)
   
   (這邊可以養成一個好習慣，不管甚麼表單都要給primary key)

調整前端畫面

前面我們在做表單的時候沒有製作輸入電話號碼的欄位，
原本表單上的假資料也需要清除。
調整部分:

1. 刪除假資料
2. 新增輸入電話號碼的欄位
3. 將元件改成bootstrap的原件
4. 適當地給上id或class(方便之後取資料使用)

表單部分更動(畫面):

<div>

    <table id="menu"
           class="table table-bordered table-warning">
        <thead>
            <tr class="table-active">
                <th colspan="3" class="text-center "><h1>店名</h1></th>
            </tr>
            <tr class="table-light">
                <th data-field="item">品名</th>
                <th data-field="price">單價</th>
                <th data-field="count">數量</th>
            </tr>
        </thead>
        <tbody id="menu_body">
            
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2"></td>
                <th class="bg-warning">小計</th>
            </tr>
            <tr>
                <td colspan="2" >
                    <div class="input-group flex-nowrap">
                        <span class="input-group-text" id="phoneText">手機</span>
                        <input type="text" id="phoneNum" class="form-control" placeholder="手機號碼" aria-label="phoneNumber" aria-describedby="phoneText">
                    </div>
                </td>
                
                <th class="bg-warning">0</th>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td>
                    <button id="submitBtn" type="button" class="btn btn-primary">
                        送出
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
    <input id="menu_data" style="visibility:hidden" value=@ViewBag.menuData />
</div>

JS 新增菜單資料的function更動:

function addItemRow(uid, item, price) {
        var data = `
            <tr id=uid`+ uid + `>
                <td class="item"> `+ item + `</td>
                <td class="price">`+ price + `</td>
                <td class="count">
                    <div class="input-group mb-3">
                      <input type="text" class="form-control" placeholder="" aria-label="Count">
                    </div>
                </td>
            </tr>
`
        $('#menu_body').append(data);
    }

結語

原本打算一次把資料回寫資料庫的部分完成，
不過這樣一來這篇又會太長，所以這邊就把留在

1. 關聯式資料表的建置
2. 畫面的調整

在建立關聯式資料庫的時候可以把握兩個重點

1. 共同項目放表頭
2. 重複項目放表身

下一篇會接著說如何把表單資料送回資料庫，分成三個大項:

1. 取得網頁上欄位資料
2. 資料送往後台
3. 資料寫回資料庫